<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>旋钮</title>
    <meta name="author" content="刘雅茜">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script src="jquery.min.js"></script>
    <script src="jquery.knob.min.js"></script>
</head>

<body>
    <input type="text" value="75" class="dial">

    <!-- HTML5的标签属性来设置参数 -->
    <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">

    <p><a href="http://www.bootcdn.cn/jQuery-Knob/readme/">参考网址</a></p>
</body>
<script type="text/javascript">
    $(".dial").knob({

        'min': 0,//最小值

        'max': 60,//最大值

        'change': function (v) { console.log(v); },// change在每次更改值时执行

        'rotation': 'clockwise',//anticlockwise逆时针。 默认：clockwise顺时针.

        'step': 1, //步长 默认：1

        'angleOffset': 0,//起始角度 默认0

        'angleArc': 360,//弧度 默认360

        "fgColor": "skyblue",//前景色

        'bgColor': '#ddd',//背景色

        'inputColor': 'skyblue',//输入框颜色（数字）      
    });

    // HTML5的标签属性来设置参数
    $(".knob2").knob({
        'release':function(e){
            $('#img').animate({width:e});
        }
    });
</script>
<script>
    // 设置值
    $('.dial')
        .val(6)
        .trigger('change');
</script>

</html>